{% extends "core/meter_detail.html" %}
{% comment 'header' %}
# This file is part of opentaps Smart Energy Applications Suite (SEAS).

# opentaps Smart Energy Applications Suite (SEAS) is free software:
# you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# opentaps Smart Energy Applications Suite (SEAS) is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Lesser General Public License for more details.

# You should have received a copy of the GNU Lesser General Public License
# along with opentaps Smart Energy Applications Suite (SEAS).
# If not, see <https://www.gnu.org/licenses/>.
{% endcomment %}

{% load static %}
{% load crispy_forms_tags %}

{% block add_button %}
{% endblock add_button %}

{% block inner_content %}
<form method="post" id="meterForm" data-weather-stations-url="{% url 'core:weather_stations_json' %}" novalidate>
  {% csrf_token %}
  {{ form|crispy }}

  <div class="form-group d-flex justify-content-around mt-5">
    <a href="{% if object %}{% url 'core:meter_detail' object.meter_id %}{% else %}{% url 'core:site_detail' site_id %}{% endif %}" class="btn btn-secondary col-5" role="button"><i class="fa fa-times mr-2"></i> Cancel</a>
    <button class="btn btn-primary col-5" type="submit"><i class="fa fa-edit mr-2"></i> Save</button>
  </div>
</form>

<script>
  {% if object %}
  selectedWeatherStation = "{{object.weather_station.weather_station_id}}";
  {% elif form.initial %}
  selectedWeatherStation = "{{form.initial.weather_station.weather_station_id}}";
  {% else %}
  selectedWeatherStation = null
  {% endif %}

  window.onload = function() {
    const elem = document.getElementById('id_weather_station');
    // Make Weather History dropdown disabled and show loading spinner
    elem.disabled = true;
    const spinnerElem = document.createElement('i');
    spinnerElem.className += ' fas fa-spinner fa-spin';
    spinnerElem.style = 'position: absolute; margin-top: 0.6em; right: 2.5em;';
    elem.parentElement.insertBefore(spinnerElem, elem);

    // Send ajax
    var url = document.getElementById('meterForm').getAttribute('data-weather-stations-url');
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        const items = JSON.parse(xhr.response).items;
        for (let item of items) {
          const option = document.createElement('option');
          option.value = item.id;
          option.text = item.value;
          elem.add(option);
        }

        // Remove loading spin
        elem.parentElement.removeChild(spinnerElem);

        // Choose default
        if (selectedWeatherStation) {
          elem.value = selectedWeatherStation;
        }
        elem.disabled = false;
      }
    }
    xhr.open('GET', url);
    xhr.send();
  }
</script>
{% endblock inner_content %}

{% block after_content %}
{% endblock after_content %}
